<template>
  <page>
  <div class="wipper">
    <navbar @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></navbar>
    <div :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px'}">
      <scroll-view>
        <div class="input">
          <input class="input1" placeholder="作者姓名"  v-model="aaa"/>
          <div class="input2" @click="find">
            <p class="find">搜索</p>
          </div>
        </div>
        <div class="dakuang">
          <div class="bigleft">
            <div class="liangge" v-for="(item,index) in imgUrls1" :index="index" :key="item.key" :style="zdyheigt"  @click="goto(item.painterId)">
              <div class="tupian">
                <image :src="item.painterImage" class="tupian"></image>
              </div>
              <div class="wenzi">
                <div class="top">
                  <p class="name">{{item.painterName}}</p>
                  <p class="jieshao">{{item.painterIntroduction}}</p>
                </div>
                <div class="middle" v-for="(item1,index1) in item.painterStyleDTOS">
                  <p class="hua">{{item1.psName}}</p>
                </div>
                <div class="under">
                  <p class="left">{{item.painterOccupation}}</p>
                  <p class="right">在售{{item.onSaleCount}}件作品</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bigright">
            <div class="liangge" v-for="(item,index) in imgUrls2" :index="index" :key="key" :style="zdyheigt" @click="goto(item.painterId)">
              <div class="tupian">
                <image :src="item.painterImage" class="tupian"></image>
              </div>
              <div class="wenzi">
                <div class="top">
                  <p class="name">{{item.painterName}}</p>
                  <p class="jieshao">{{item.painterIntroduction}}</p>
                </div>
                <div class="middle" v-for="(item1,index1) in item.painterStyleDTOS">
                  <p class="hua">{{item1.psName}}</p>
                </div>
                <div class="under">
                  <p class="left">{{item.painterOccupation}}</p>
                  <p class="right">在售{{item.onSaleCount}}件作品</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
  </page>
</template>

<script>
  import navbar from '@/components/navbar'

  export default {
    name: "index",
    components: {
      navbar
    },
    data() {
      return {
        imgUrls: [],
        zdyheigt: {
          height: ''
        },
        imgUrls1: [],
        imgUrls2: [],
        msgFormSon: '',
        msgFormSon1: '',
        userInfo:'',
        token:'',
        aaa:''
      }
    },
    onLoad() {
      wx.showShareMenu({
        withShareTicket: true
      })
    },
    onShow() {
      this.find();
    },
    onPullDownRefresh () {
      this.find();
    },
    methods: {
      getHeight() {
        let num = this.imgUrls.length;
        if (num % 2 === 0) {
          for (let i = 0; i < num / 2; i++) {
            this.imgUrls1.push(this.imgUrls[i]);
          }
          for (let i = num / 2; i < num; i++) {
            this.imgUrls2.push(this.imgUrls[i]);
          }
        }
        else {
          for (let i = (num +1)/2; i < num; i++) {
            this.imgUrls2.push(this.imgUrls[i]);
          }
          for (let i = 0; i <= num / 2; i++) {
            this.imgUrls1.push(this.imgUrls[i]);
          }
        }
      },
      goto(painterId){
        const url = '/pages/painterInfo/main?painterId='+painterId;
        const pages = getCurrentPages();
        if(pages.length === 10){
          wx.redirectTo({url});
        }
        else{
          wx.navigateTo({url});
        }
      },
      getMsgFormSon(data) {
        this.msgFormSon = data;
      },
      getMsgFormSon1(data) {
        this.msgFormSon1 = data;
      },
      find(){
        this.imgUrls2=[];
        this.imgUrls1=[];
        this.$request.post({
          url: '/api/painter/query4Mobile',
          data: {
            "painterId":'', //可无
            "painterName":this.aaa  //可无
          }
        }).then(res => {
          this.imgUrls=res;
          for(let i=0;i<this.imgUrls.length;i++)
          {
            if(this.imgUrls[i].painterIntroduction==null||this.imgUrls[i].painterIntroduction=='')
            {
              this.imgUrls[i].painterIntroduction='快速升值中'
            }
          }
          this.getHeight();
        })
      }
    },
  }
</script>

<style scoped>
  .wipper {
    background-color: rgba(247, 247, 247, 1);
  }

  .input {
    margin-left: 24px;
    display: flex;
    flex-direction: row;
  }

  .input1 {
    width: 266px;
    height: 30px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(151, 137, 137, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    padding-left: 12px;
  }

  .input2 {
    background: rgba(144, 42, 38, 1);
    margin-right: 24px;
    width: 100px;
    height: 32px;
  }

  .find {
    width: 24px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: rgba(255, 255, 255, 1);
    line-height: 17px;
    margin-left: 31px;
    margin-top: 8px;
  }

  .dakuang {
    margin-top: 17px;
    margin-left: 12px;
    margin-right: 2px;
  }

  .liangge {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    height: auto;
  }

  .tupian {
    width: 173px;
    height: 173px;
    margin-right: 5px;
  }

  .wenzi {
    width: 173px;
    background: rgba(255, 255, 255, 1);
  }

  .top {
    display: flex;
    flex-direction: row;
  }

  .name {
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(47, 49, 51, 1);
    line-height: 22px;
    white-space: nowrap;
  }

  .jieshao {
    margin-left: 4px;
    margin-top: 3px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .middle {
    margin-top: 8px;
    width: 85px;
    height: 22px;
    border: 1px solid rgba(144, 42, 38, 1);
    padding-left: 4px;
    padding-top: 3px;
  }

  .hua {
    width: 77px;
    height: 16px;
    font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(144, 42, 38, 1);
    line-height: 16px;
  }

  .under {
    margin-top: 8px;
    display: flex;
    flex-direction: row;
  }

  .left {
    width: 90px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
  }

  .right {
    width: 68px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
  }

  .bigleft {
    float: left;
  }

  .bigright {
    float: right;
  }
</style>
